<template>
  <div>
    <div style="margin-top: 15px">
      <el-input placeholder="请输入内容" v-model="serach">
        <template slot="append">搜索</template>
      </el-input>
    </div>

    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="order_number" label="订单编号">
      </el-table-column>
      <el-table-column property="order_price" label="订单价格">
      </el-table-column>
      <el-table-column property="pay_status" label="是否付款">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.pay_status == '0' ? 'success' : 'waring'"
            effect="dark"
          >
            {{ scope.row.pay_status == 0 ? "未付款" : "已付款" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column property="is_send" label="是否发货"> </el-table-column>
      <el-table-column property="update_time" label="下单时间">
        <!-- <template slot-scope="scope">
          {{new Date(scope.row.create_time).tolocaleDateString()}}
        </template> -->
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog class="dialog" :visible.sync="editOpen" title="修改地址">
      <el-form
        :model="form2"
        :inline="true"
        label-position="right"
        ref="form2"
        label-width="100px"
        class="form"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-cascader
            v-model="value"
            :options="options.provinceName"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="form.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="editOk">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getOrders } from "../utils/api";

export default {
  props: {},
  data() {
    return {
      serach: "",
      tableData: [],
      value: "",
      options: {},
      form2: {},
      editOpen: false,
      total: 1,
      form: {
        query: "",
        pagenum: 1,
        pagesize: 20,
        user_id: "",
        pay_status: "",
        is_send: "",
        order_fapiao_title: "",
        order_fapiao_company: "",
        order_fapiao_content: "",
        consignee_addr: "",
      },
    };
  },
  computed: {},
  created() {
    this.render();
    this.$axios.get("data.json").then((res) => {
      console.log(res);
      this.options = res.data.provinces;
      console.log(this.options);
    });
  },
  mounted() {},
  watch: {},
  methods: {
    render() {
      getOrders(this.form).then((res) => {
        console.log(res.data.goods);
        this.tableData = res.data.goods;
        console.log(this.tableData);
      });
    },
    handleEdit() {
      this.editOpen = true;
    },
    handleDelete(id) {
      
    },
    handleChange() {},
    editOk() {},
  },
  components: {},
};
</script>

<style scoped lang="scss">
.el-input {
  width: 300px;
}
</style>
